<template>
  <view class="course-card" :class="{ 'locked': locked }">
    <view class="image-container">
      <image :src="image" mode="aspectCover" class="cover-image" />
      <view v-if="locked" class="lock-overlay">
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white"
          stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lock-icon">
          <rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect>
          <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
        </svg>
      </view>
      <view v-if="tags.length > 0" class="tags-container">
        <view v-for="(tag, index) in tags" :key="index" class="tag">
          {{ tag }}
        </view>
      </view>
    </view>

    <view class="card-content">
      <text class="title">{{ title }}</text>
      <text v-if="description" class="description">{{ description }}</text>

      <view class="course-info">
        <view class="info-item">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            class="info-icon book-icon">
            <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
            <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
          </svg>
          <text>{{ chapters }}章课程</text>
        </view>
        <view class="info-item">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="info-icon">
            <circle cx="12" cy="12" r="10"></circle>
            <polyline points="12 6 12 12 16 14"></polyline>
          </svg>
          <text>{{ formatDuration }}</text>
        </view>
      </view>

      <view v-if="progress > 0" class="progress-section">
        <view class="progress-info">
          <view class="completion">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="check-icon">
              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
              <polyline points="22 4 12 14.01 9 11.01"></polyline>
            </svg>
            <text>{{ completed }}/{{ chapters }}章</text>
          </view>
          <text class="progress-text">{{ progress }}%</text>
        </view>
        <view class="progress-bar">
          <view class="progress-indicator" :style="{ width: `${progress}%` }"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  description: {
    type: String,
    default: ''
  },
  image: {
    type: String,
    default: '/static/images/placeholder.png'
  },
  progress: {
    type: Number,
    default: 0
  },
  tags: {
    type: Array,
    default: () => []
  },
  chapters: {
    type: Number,
    required: true
  },
  completed: {
    type: Number,
    default: 0
  },
  duration: {
    type: Number,
    required: true
  },
  locked: {
    type: Boolean,
    default: false
  }
});

const formatDuration = computed(() => {
  const hours = Math.floor(props.duration / 60);
  const minutes = props.duration % 60;

  if (hours > 0) {
    return `${hours}小时${minutes > 0 ? `${minutes}分钟` : ''}`;
  }
  return `${minutes}分钟`;
});
</script>

<style scoped>
.course-card {
  border-radius: 12px;
  overflow: hidden;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s;
}

.course-card:active {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.image-container {
  position: relative;
  height: 112px;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
}

.lock-icon {
  opacity: 0.8;
}

.tags-container {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tag {
  padding: 1px 6px;
  border-radius: 4px;
  background-color: #3b82f6;
  font-size: 10px;
  color: white;
}

.card-content {
  padding: 12px;
}

.title {
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.description {
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.course-info {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.info-icon {
  color: #6b7280;
}

.book-icon {
  color: #3b82f6;
}

.progress-section {
  margin-top: 8px;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 12px;
}

.completion {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #6b7280;
}

.check-icon {
  color: #10b981;
}

.progress-text {
  font-weight: 500;
  color: #3b82f6;
}

.progress-bar {
  height: 4px;
  border-radius: 2px;
  background-color: #eff6ff;
  overflow: hidden;
}

.progress-indicator {
  height: 100%;
  background-color: #3b82f6;
  border-radius: 2px;
}
</style>